
<script setup>
import { logisticePlanPeriod } from '@/apis/dict.js'
import { ref, watch } from 'vue'
const props = defineProps({
  planInfo: {
    type: Object,
    default: () => ({}),
  },
})
const period = ref("")
const getPeriod = async () => {
  try {
    const res = await logisticePlanPeriod()
    const arr = res.data.length && res.data.filter(item => item.dictValue == props.planInfo.period)
    if (arr.length === 0) period.value = ''
    period.value = arr[0].dictLabel
  } catch {
    uni.$u.toast("获取时间段失败")
  }

}

watch(() => props.planInfo, (newVal) => {
  if (newVal.period) {
    getPeriod()
  }
})
</script>

<template>
  <view class="plan-card mb">
    <view class="plan_content">
      <view class="info-item">
        <view class="info-icon">📋</view>
        <view class="info-content">
          <text class="info-label">计划名称</text>
          <text class="info-value">{{ planInfo.planname }}</text>
        </view>
      </view>
    </view>
    <view class="info-item" style="margin: 20rpx 0;">
      <view class="info-icon">🏷️</view>
      <view class="info-content">
        <text class="info-label">单据号</text>
        <text class="info-value">{{ planInfo.billno }}</text>
      </view>
    </view>
    <view class="flex">
      <view class="info-item">
        <view class="info-icon">📅</view>
        <view class="info-content">
          <text class="info-label">预计到达时间</text>
          <text class="info-value">{{ planInfo.expectdate }}</text>
        </view>
      </view>
      <view class="info-item">
        <view class="info-icon">⏰</view>
        <view class="info-content">
          <text class="info-label">时间段</text>
          <text class="info-value">{{ period }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.plan-card {
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: 1rpx solid #f0f0f0;
  padding: 20rpx;

  .info-item {
    display: flex;
    align-items: flex-start;
    flex: 1;

    &:last-child {
      margin-bottom: 0;
    }

    .info-icon {
      font-size: 32rpx;
      margin-right: 16rpx;
      margin-top: 4rpx;
      opacity: 0.8;
    }

    .info-content {
      flex: 1;

      .info-label {
        display: block;
        font-size: $list-font-size;
        color: $list-color;
        margin-bottom: 6rpx;
        font-weight: 400;
      }

      .info-value {
        display: block;
        font-size: $list-font-size;
        color: $list-color;
        font-weight: 500;
        line-height: 1.4;
        word-break: break-all;
      }
    }
  }
}
</style>
